<template>
  <Basic title="确认" :show-dialog="showRelieveDialog" @cancel="handleCancel" @confirm="handleConfirmDialog">
    <div class="pt-5 text-center">
      <p>确认解除 <span class="text-lg font-semibold">{{name}}</span> 隔离吗？</p>
    </div>
  </Basic>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { usePersonStore } from '@/store/person'
import Basic from './Basic.vue'
import { Notify } from 'vant'

export default defineComponent({
  name: 'Accept',
  components: {
    Basic
  },
  props: {
    person: {
      type: Object,
      default: () => {}
    },
  },
  setup(props, { emit }) {
    const store = usePersonStore()
    const person = computed(() => props.person)
    const showRelieveDialog = computed(() => {
      if(!person.value) return false
      return store.showRelieveDialog
    })

    const name = computed(() => props.person.name)

    const handleCancel = () => {
      store.setShowRelieveDialog(false)
    }

    const handleConfirmDialog = async () => {
      const { code, data } = await store.relievePerson(props.person.id) as any
      if(code === 200) {
        store.setShowRelieveDialog(false)
        emit('success', data)
      }
    }

    return {
      showRelieveDialog,
      handleCancel,
      handleConfirmDialog,
      name
    };
  }
})
</script>

